<!-- <template>
  <div>
    <el-tree :data="tableData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
import { getThinkingApi, addFeelingListApi, updateFeelingListApi, deleteFeelingListApi, } from "@/api/thinking"
import SysDialog from "@/components/System/SysDialog.vue";
import Cookies from "js-cookie";
export default {
  name: "thinking",
  components: {
    SysDialog,
  },
  data() {
    return {
      params: {
        name: "",
        sessionId: '',
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      addContent: {
        id: 0,
        tno: 0,
        baseId: 0,
        name: "",
        className: "",
        content: ""
      },
      tableData: [{
        label: '一级 1',
        label: '一级 tt',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      // tableData: [],
      defaultProps: {
        // children: 'thinkVoList',
        // label: 'talkVoList'
        children: 'children',
        label: 'label'
      }
    };
  },
  created() {
    this.getList();
    this.userType = localStorage.getItem("type");
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 200;
    });
    this.getList()
  },
  methods: {
    //获取列表
    async getList() {
      var res = await getThinkingApi(this.params);
      console.log(res);
      var success = res.success
      if (success) {
        this.tableData5 = res.data;
        console.log(this.tableData5.baseId);
        this.params.total = res.data.total;
      }
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script> -->

<template>
  <el-main>
    <!-- <el-table :data="data4" style="width: 100%">
    <el-table-column label="实验名"></el-table-column> -->
    <el-form :model="params" ref="searchForm" label-width="90px" :inline="true" size="small">
      <el-form-item>
        <el-button v-if="userType == '2'" type="primary" icon="el-icon-plus" @click="addIntroduction">添加思考题及提示</el-button>
        <el-button v-if="userType == '1'" type="primary" icon="el-icon-plus" @click="addIntroductionThink">提交思考题</el-button>
      </el-form-item>
    </el-form>
    <el-tree :data="data4" :props="defaultProps" node-key="id" :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>

    <sys-dialog v-if="theType==1" :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
      @onClose="onClose" @onConfirm="onConfirm">
      <div slot="content">
        <el-form :model="addContent" ref="addForm" :rules="rules" label-width="80px" :inline="false" size="small">
          <el-form-item prop="name" label="实验名称">
            <el-input v-model="addContent.name"></el-input>
          </el-form-item>
          <el-form-item prop="className" label="班级名称">
            <el-select v-model="addContent.classId" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="background" label="兴趣话题">
            <el-input type="textarea" v-model="addContent.interestTopics" :rows="5"></el-input>
          </el-form-item>
          <el-button type="text" @click="open3">点击添加思考题</el-button>
          <!-- <el-form-item prop="applicationSituation" label="应用情况">
            <el-input type="textarea" v-model="addContent.applicationSituation" :rows="5"></el-input>
          </el-form-item> -->
        </el-form>
      </div>
    </sys-dialog>

    <sys-dialog v-if="theType==2" :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
      @onClose="onClose" @onConfirm="onConfirmThink">
      <div slot="content">
        <el-form :model="addContentThink" ref="addFormThink" :rules="rules" label-width="80px" :inline="false" size="small">
          <el-form-item prop="content" label="思考内容">
            <el-input v-model="addContentThink.content"></el-input>
          </el-form-item>
          <el-form-item prop="thinkId" label="思考题名字">
            <el-select v-model="addContentThink.thinkId" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.id" :label="item.content" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item prop="applicationSituation" label="应用情况">
            <el-input type="textarea" v-model="addContent.applicationSituation" :rows="5"></el-input>
          </el-form-item> -->
        </el-form>
      </div>
    </sys-dialog>
  </el-main>
</template>

<script>
import { getThinkingApi,getThinkListApi, addThinkingApi, getClassListApi, addThinkingTipsApi,addTalkApi } from "@/api/thinking"
import SysDialog from "@/components/System/SysDialog.vue";
import Cookies from "js-cookie";

let id = 1000;

export default {
  name: "thinking",
  components: {
    SysDialog,
  },
  data() {
    return {
      data4: [{
        id: 1,
        name: '一级 1',
        content: '',
        className: 'jiayou',
        teacherName: '',
        interestTopics: 'aaa',
        thinkVoList: [{
          id: 4,
          label: '二级 1-1',
          content: '',
          thinkVoList: [{
            id: 9,
            content: '',
            studentName: '',
            label: '三级 1-1-1'
          }, {
            id: 10,
            content: '',
            studentName: '',
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        name: '一级 2',
        className: 'jiayou',
        interestTopics: 'aaa',
        thinkVoList: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        name: '一级 3',
        className: 'jiayou',
        interestTopics: 'aaa',
        thinkVoList: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'thinkVoList',
        label: 'content',
        // name: 'name',
        // label: ['label','name'],
      },
      addContent: {
        id: 0,
        tno: 0,
        classId: 0,
        name: "",
        className: "",
        interestTopics: "",
        // applicationSituation: "",
      },
      addContentThink: {
        thinkId: 0,
        content: "",
      },
      params: {
        total: 0,
      },
      options: [],
      options2: [],
      dialog: {
        title: "",
        visible: false,
        width: 550,
        height: 320,
      },
      addThink: {
        id:0,
        thinkingAndTipsId:0,
        content: "",
        tno:0,
      },
      theType:0
    }
  },

  created() {
    this.getList();
    this.userType = localStorage.getItem("type");
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 200;
    });
    this.getList()
  },
  methods: {
    //获取列表
    async getList() {
      getClassListApi().then((res) => {
        this.options = res.data;
      })
      getThinkListApi().then((res) => {
        this.options2 = res.data;
      })
      var res = await getThinkingApi(this.params);
      console.log(res);
      var success = res.success
      if (success) {
        this.data4 = res.data;
        console.log('data4', this.data4);
        // console.log(this.tableData5.baseId);
        // this.params.total = res.data4.total;
      }
    },
    //新增
    addIntroduction() {
      this.theType=1;
      this.$resetForm("addForm", this.addContent);
      this.addContent.typeNo = "0";
      this.dialog.title = "新增";
      this.dialog.visible = true;
    },
    addIntroductionThink(){
      this.theType=2;
      this.$resetForm("addFormThink", this.addContentThink);
      this.addContentThink.typeNo = "0";
      this.dialog.title = "新增";
      this.dialog.visible = true;
    },
    open3() {
      this.$prompt('请输入思考题', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.addThink.content = value.toString(),
        this.$message({
          type: 'success',
          message: '思考题:' + value + ' 添加成功!'
        }),
        addThinkingApi(this.addThink)

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    append(data) {
      const newChild = { id: id++, label: 'testtest', children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },

    renderContent(h, { node, data, store }) {
      console.log('123456789', data);

      var tname = '';
      // var t=data.thinkVoList;
      // console.log('t1',t);
      if (data.studentName != undefined)
        var sName = data.studentName

      if (data.teacherName != undefined && data.teacherName != "")
        tname = data.teacherName
      // if(t.length>=1){

      //   t=t.thinkVoList;
      //   console.log('t2',t);
      //   if(t.length>=1){
      //    var sName= t.studentName;
      //   }
      // }
      // var tr=data.thinkVoList.thinkVoList;
      return (
        <span style="flex: 1; display: flex; align-items: center; text-align:center ; width:100px; float:right; justify-content: space-between; font-size: 16px; padding-right: 8px;">
          <span style="width:100px; float:left">
            <span>{node.label}</span>
          </span>
          <span style="width:100px; float:left">
            <span>{data.name}</span>
          </span>
          <span style="width:100px; float:left">
            <span>{sName}</span>
          </span>
          <span style="width:100px; float:left">
            <span>{data.className}</span>
          </span>
          <span v-if="tname!=''" style="width:150px; float:left">
            <span>{tname}</span>
          </span>
          <span style="width:100px; float:left">
            <span>{data.interestTopics}</span>
          </span>


          <span>
            <el-button style="font-size: 12px;" type="text" on-click={() => this.append(data)}></el-button>
            <el-button style="font-size: 12px;" type="text" on-click={() => this.remove(node, data)}></el-button>
          </span>
        </span>);
    },
    //确认对话框
    onConfirm() {
      this.$refs.addForm.validate(async (valied) => {
        if (valied) {
          var res = null;
          if (this.addContent.typeNo == "0") {
            console.log(this.addContent);
            res = await addThinkingTipsApi(this.addContent);
          } else {
            console.log(this.addContent);
            res = await updateIntroductionApi(this.addContent);
          }
          if (res.success) {
            //请求成功 刷新列表
            this.getList();
            this.dialog.visible = false;
            this.$message.success(res.msg);
          }
        }
      });
    },
    onConfirmThink() {
      this.$refs.addFormThink.validate(async (valied) => {
        if (valied) {
          var res = null;
          if (this.addContentThink.typeNo == "0") {
            console.log(this.addContentThink);
            res = await addTalkApi(this.addContentThink);
          } else {
            console.log(this.addContent);
            res = await updateIntroductionApi(this.addContent);
          }
          if (res.success) {
            //请求成功 刷新列表
            this.getList();
            this.dialog.visible = false;
            this.$message.success(res.msg);
          }
        }
      });
    },
    
    //关闭对话框
    onClose() {
      this.dialog.visible = false;
    },
    //页容量改变时触发
    sizeChange(val) {
      this.params.pageSize = val;
      this.getList();
    },
    //当前页数改变时触发
    currentChange(val) {
      this.params.currentPage = val;
      this.getList();
    },
    // 搜索
    searchUser() {
      this.getList();
    },
    // 重置表格
    resetUser() {
      this.params.name = "";
      this.params.phoneNumber = "";
      this.params.idCard = "";
      this.getList();
    },
  },

};
</script>

<style lang="scss" scoped></style>

<!-- <template>
  <div>
    <vxe-table border resizable :tree-config="{ transform: true }" :data="tableData">
      <vxe-column field="name" title="Name" tree-node></vxe-column>
      <vxe-column type="expand" width="60">
        <template #content="{ row, rowIndex }">
          <ul class="expand-wrapper">
            <li>
              <span>ID：</span>
              <span>{{ row.id }}</span>
            </li>
            <li>
              <span>Name：</span>
              <span>{{ row.name }}</span>
            </li>
            <li>
              <span>Date</span>
              <span>{{ row.date }}</span>
            </li>
          </ul>
        </template>
      </vxe-column>
      <vxe-column field="size" title="Size"></vxe-column>
      <vxe-column field="type" title="Type"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
// import { getThinkingApi, addFeelingListApi, updateFeelingListApi, deleteFeelingListApi, } from "@/api/thinking"
// import SysDialog from "@/components/System/SysDialog.vue";
// import Cookies from "js-cookie";
export default {
  // name: "thinking",
  // components: {
  //   SysDialog,
  // },
  data() {
    return {
      tableData: [
        { id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
        { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
        { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
        { id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
        { id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: null, date: '2021-04-01' },
        { id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },
        { id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
        { id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },
        { id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },
        { id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }
      ]
    }
  }
}
</script>

<style scoped>
.expand-wrapper {
    padding: 20px;
}
</style>  -->